<template>
    <div>
        <el-container>

            <el-aside :width="menuCollapse?'64px':'200px'">
                <el-menu
                        @select="selectMenu"
                        :default-active='activeMenu'
                        router
                        :collapse='menuCollapse'
                    class="el-menu-vertical-demo"
                    background-color="#304156"
                    text-color="#fff"
                    active-text-color="#0f6ff1">
                    <el-menu-item index="/welcome">欢迎</el-menu-item>
                    <!--一级子菜单-->
                <el-submenu :index="formatPath(null,item.name)" v-for="item in firstMenus" :key="item.id">
                    <template slot="title">
                        <i class="el-icon-location"></i>
                        <span>{{item.title}}</span>
                    </template>
                    <!--二级子菜单-->
                        <el-menu-item class="menu-second" :index="formatPath(item.name,subitem.name)" :key="subitem.id" v-for="subitem in secondMenus(item.id)">{{subitem.title}}</el-menu-item>
                </el-submenu>
            </el-menu>
            </el-aside>

            <el-container>
                <el-header>
                    <el-button :icon="menuCollapse?'el-icon-s-fold':'el-icon-s-unfold'" @click="menuCollapse=!menuCollapse"></el-button>
                    <el-dropdown  @command="handleCommand">
  <span class="el-dropdown-link">
   <el-avatar :src="loginInfo.icon"></el-avatar>欢迎：{{this.loginInfo.username}}
      <i class="el-icon-arrow-down el-icon--right"></i>

  </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item command="updatePassword">修改密码</el-dropdown-item>
                            <el-dropdown-item command="logout">注销</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </el-header>
                <el-main>
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>

        <el-button @click="getGoodsInfo">获取商品</el-button>
    </div>
</template>

<script>
    import {api_logout} from '../api/login.js'
    import {api_info} from '../api/login.js'
    import {api_productList}  from "../api/product";

    '../api/product.js'
    export default {
        data(){
            return{
                menuCollapse:false,
                activeMenu:'',
                command:'',
                loginInfo:{
                    username:'',
                    icon: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'
                },
                menus:[]

            }
        },
        mounted(){
            this.activeMenu=window.sessionStorage.getItem('activeMenu');
            if (!this.activeMenu) {
                this.activeMenu='/welcome'
            }
            this.getInfo()
        },
        watch:{
            $route(to){
                this.selectMenu(to.path)

            }
        },
        computed:{
            firstMenus() {
                console.log("this.menus.filter(item => item.parentId === 0):::"+this.menus.filter(item => item.parentId === 0))
                return this.menus.filter(item => item.parentId === 0)
            },
            secondMenus(){
                return parentId=>this.menus.filter(item=>item.parentId ===parentId)
            }
        },
        methods: {
            formatPath(folder,name){
              name='/'+name;
              if (folder) {
                  name='/'+folder+name
              }
              return name
            },
            async getInfo(){
                const {data:res}=await api_info()//const res = (await this.axios.delete('users/'+id)).data
                const result = res.data;
                console.log("api_info:::"+res)
                console.log("JSON.stringify(res.code):::"+JSON.stringify(res.code))
                console.log("api_info:username::"+result.username)
                console.log("api_info:menu::"+result.username)
                this.loginInfo.username=result.username;
                this.loginInfo.icon=result.icon;
                this.menus=result.menus
            },
            handleCommand(command) {
                // this.$message('click on '+command);
                if (command == "logout") {
                    this.handleLogout();
                }
            },
            async handleLogout(){
                this.$message('注销');
                const  {data:res}= await  api_logout();
                console.log("handleLogout result:::"+res.code);
                if(res.code!=200){
                    //退出失败！
                    this.$message.error(res.message);
                    return
                }
                //退出成功
                //清楚session
                window.sessionStorage.clear();
                //跳转到登录页面
                this.$router.replace('/')
            },
            selectMenu(index,indexPath){
                console.log("index:::"+index);
                console.log("indexPath:::"+indexPath);
                this.activeMenu=index;
                window.sessionStorage.setItem('activeMenu',index);
            },
            async getGoodsInfo(){
                this.$message('获取商品列表');
                const  {data:res}= await  api_productList();
                console.log("getGoodsInfo res.code:::"+res.code);
                console.log("getGoodsInfo res.data:::"+res.data);

                console.log("getGoodsInfo JSON.stringify(res.data):::"+JSON.stringify(res.data));
                if(res.code!=200){
                    //退出失败！
                    this.$message.error(res.message);
                    return
                }
            }
        }
    }
</script>

<style scoped>
    .el-avatar{
        position: relative;
        top: 12px;
    }
    .el-header{
        line-height: 60px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: #D3DCE6 solid 1px;
    }

    .el-aside {
        background-color: #304156;
        color: #333;
        line-height: 200px;
        height: 100vh;
    }

    .el-main {
        height: 100%;
        background-color: #E9EEF3;
        color: #333;
        text-align: left;
    }

    body > .el-container {
        margin-bottom: 40px;
    }

    .el-container:nth-child(5) .el-aside,
    .el-container:nth-child(6) .el-aside {
        line-height: 260px;
    }

    .el-container:nth-child(7) .el-aside {
        line-height: 320px;
    }

    .el-dropdown-link {
        cursor: pointer;
        color: #409EFF;
    }
    .el-icon-arrow-down {
        font-size: 12px;
    }
    .el-menu {
        border:none;
    }
    .menu-second{
        background-color: #1f2d3d !important;;
    }
    .menu-second:hover{
        background-color: #001528 !important;;
    }


</style>
